<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_CSS常用值</title>
  <style>
    h1{
      color: red;
      color: rgb(255,0,0);
      color: rgb(0,255,0);
      color: rgb(0,0,255);
      color: rgb(0,255,255);
      color: rgb(255,0,255);
      color: rgb(255,255,0);
      color: rgb(255,255,255);
      color: rgb(0,0,0);

      /*十六进制表示*/
      color: #FF0000;
      color: #00FF00;
      color: #0000FF;
      color: #00FFFF;
      color: #FF00FF;
      color: #FFFF00;
      color: #808080;
      color: #FFFFFF;
      color: #000000;

      /*简写*/
      color: #F00;
      color: #0F0;
      color: #00F;
      color: #0FF;
      color: #F0F;
      color: #FF0;
      color: #808080;
      color: #FFF;
      color: #000;
    }
    div {
      width: 100px;
      height: 100px;
      border: 5px solid #000;
    }
    .d1{
      background-color: rgba(255,0,0,1);
    }
    .d2{
      background-color: rgba(255,0,0,0.7);
    }
    .d3{
      background-color: rgba(255,0,0,0.5);
    }
    .d4{
      background-color: rgba(255,0,0,.3);
    }
    .d5{
      background-color: rgba(255,0,0,.1);
    }
    .bgi {
      width: 500px;
      height: 300px;
      /*background-image:url(../day01/1.jpg)*/
      /*背景处理：渐变（角度，颜色1，颜色2...）
      角度必须放在第一个*/
      background-image: linear-gradient(130deg, red, yellow, blue);
    }
    .viewport{
      width: 100vw;/*100%视口宽度*/
      height: 100vh;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="viewport"></div>
  <h1>测试色值</h1>
  <!--.d*5 Tab补齐-->
  <div class="d1"></div>
  <div class="d2"></div>
  <div class="d3"></div>
  <div class="d4"></div>
  <div class="d5"></div>
  <div class="bgi"></div>
</body>
</html>